Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae accumsan mauris. Donec vitae nibh felis, facilisis bibendum sapien.
In ultricies ante eget tortor euismod vitae molestie eros hendrerit. Cras tristique, orci ac lacinia aliquet, velit risus laoreet lectus, eget sollicitudin metus orci non nulla.
Pellentesque ac turpis turpis. Aliquam erat volutpat. Proin semper auctor mauris vel tempor. Ut eget turpis neque. Nam ultricies tortor eu odio ultricies euismod.
<!-- Chat --> <div class="widget widget-inverse widget-chat" data-builder-exclude> <div class="widget-head"> <h4 class="heading"><i class="icon-comment-fill-1"></i> Chat</h3> </div> <div class="widget-body padding-none border-bottom"> <!-- Slim Scroll --> <div class="slim-scroll chat-items" data-scroll-height="235px" data-scroll-size="0"> <!-- Media item --> <div class="media innerAll border-bottom"> <small class="author"><a href="#" title="" class="strong">Martin</a></small> <img src="../assets/images/people/50/2.jpg" alt="" class="img-circle media-object pull-left"> <div class="media-body"> <small class="date"><cite>just now</cite></small> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae accumsan mauris. Donec vitae nibh felis, facilisis bibendum sapien.</p> </div> </div> <!-- // Media item END --> <!-- Media item --> <div class="media innerAll border-bottom right"> <small class="author"><a href="#" title="" class="strong">John Doe</a></small> <img src="../assets/images/people/50/5.jpg" alt="" class="img-circle media-object pull-right" > <div class="media-body"> <small class="date"><cite>15 seconds ago</cite></small> <p>In ultricies ante eget tortor euismod vitae molestie eros hendrerit. Cras tristique, orci ac lacinia aliquet, velit risus laoreet lectus, eget sollicitudin metus orci non nulla.</p> </div> </div> <!-- // Media item END --> <!-- Media item --> <div class="media innerAll"> <small class="author"><a href="#" title="" class="strong">Ricky</a></small> <img src="../assets/images/people/50/7.jpg" alt="" class="img-circle media-object pull-left" > <div class="media-body"> <small class="date"><cite>5 minutes ago</cite></small> <p>Pellentesque ac turpis turpis. Aliquam erat volutpat. Proin semper auctor mauris vel tempor. Ut eget turpis neque. Nam ultricies tortor eu odio ultricies euismod.</p> </div> </div> <!-- // Media item END --> </div> <!-- // Slim Scroll END --> </div> <div class="chat-controls bg-default innerAll half"> <div class=""> <form class="margin-none"> <div class="input-group"> <input type="text" name="message" class="form-control" placeholder="Type your message .." /> <div class="input-group-btn"> <a type="submit" class="btn btn-primary"><i class="fa fa-comments-o"></i></a> </div> </div> </form> </div> </div> </div> <!-- // Chat END -->
@import "assets/components/modules/admin/widgets/widget-chat/assets/less/widget-chat.less"; @import "assets/components/core/less/widgets.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less"; @import "assets/components/core/less/forms.less"; @import "http://localhost/shared/components/library/jquery-ui/css/jquery-ui.min.css";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
HEAD You should include the following scripts in the head section of the document, right before the closing </head>
tag, after styles.
<script src="assets/components/library/jquery-ui/js/jquery-ui.min.js?v=v1.2.3"></script> <script src="assets/components/plugins/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js?v=v1.2.3"></script>
BODY You should include the following scripts at the end of the HTML document, right before the closing </body>
tag.
<script src="assets/components/modules/admin/widgets/widget-chat/assets/js/widget-chat.js?v=v1.2.3"></script> <script src="assets/components/plugins/slimscroll/jquery.slimscroll.js?v=v1.2.3"></script>